<template>
  <!-- 商品展示  thumb-link="/navbar"-->
  <van-swipe-cell v-for="g in goods" :key="g.goodsId">
    <div>发布日期：{{ g.listTime }}</div>
    <!-- <div>{{g.time  }}</div> -->
    <van-card to="goods" :price="(g.price)" :title="(g.goodsName)" :desc="(g.details)" :thumb="getImageUrl(g.picture)"
    @click-thumb="toGoodsList(g.goodsId)" >
      <router-link :to="{ name: 'goods' }"></router-link>
      <template #tags>
        <van-tag plain type="primary">{{ g.brand }}</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" to="message">联系卖家</van-button>
        <van-button size="mini" to="tocomment">查看评价</van-button>
      </template>
    </van-card>
    <!-- 滑动删除 -->
    <template #right>
      <van-button square text="删除" type="danger" class="delete-button" />
    </template>
    
  </van-swipe-cell>
</template>
    
<script setup>
import { onMounted } from 'vue';
import { reactive } from 'vue';
import { useRouter,useRoute } from 'vue-router'; //路由器
import { default as http, getImageUrl } from '@/utils/request.js';
import { ref } from 'vue';

// 返回上一页面
const onClickLeft = () => history.back();
const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
const route = useRoute();   //获取路由对象
const activeName = ref('fabu');

const goods = reactive([
])
//商品 详情页
const toGoodsList=function(goodsId){
  console.log("商品ID:",goodsId);
  router.push({ name: 'goods', params: { goodsId: goodsId } });
}

const getGoods = function () {
  http.get(
    '/user/fabu', {
      params: {
        pageSize: 6,
        pageNum: 1
      }
    }
  ).then((res)=> {
    console.log('获取到的发布商品列表：', res.data);
    goods.splice(0);//todo 需要将原有的元素清空
    res.data.data.forEach(g => {
      goods.push(g);
    });
    console.log('获取到的发布商品列表goods：', goods);
  }).catch(() =>{
    //reject(err); // 当请求失败时，返回一个请求失败的Promise  
  });
};
onMounted(() => {
  // 获取商品列表
  getGoods();

  // getparseJWT();

});
</script>
    
<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-card__price {

    color: #f50606;

}
</style>